<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

<title>电影网-电影详情页</title>

<!-- Bootstrap core CSS -->
<link
	href="${pageContext.request.contextPath}/dist/css/bootstrap.min.css"
	rel="stylesheet">


<!-- Custom styles for this template -->
<link href="${pageContext.request.contextPath}/front/offcanvas.css"
	rel="stylesheet">


</head>

<body>
	<nav class="navbar navbar-fixed-top navbar-inverse">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">2023电影网</a>
			</div>
			<div id="navbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
				</ul>

			</div>
			<!-- /.nav-collapse -->
		</div>
		<!-- /.container -->
	</nav>
	<!-- /.navbar -->

	<div class="container">

		<div class="row row-offcanvas row-offcanvas-right">

			<div class="col-xs-12 col-sm-9">
				<p class="pull-right visible-xs">
					<button type="button" class="btn btn-primary btn-xs"
						data-toggle="offcanvas">Toggle nav</button>
				</p>
				<div class="jumbotron">
					<h1>Hello, world!</h1>
					<p>This is an example to show the potential of an offcanvas
						layout pattern in Bootstrap. Try some responsive-range viewport
						sizes to see it in action.</p>
				</div>
				<div class="row">


					<div class="blog-post">
						<h2 class="blog-post-title">${movie.mname}</h2>
						<hr>
						<p class="col-sm-6">
							<a href="#"><img alt="" src="${pageContext.request.contextPath}/images/${movie.mpage}"></a>
						</p>
						<p class="col-sm-6">
							<br /> 导演:<strong>${movie.mdirector}</strong>
						</p>
						<p class="col-sm-6">
							编剧: <em>${movie.mdirector}</em>
						</p>
						<p class="col-sm-6">
							主演: <em>${movie.mactor}</em>
						</p>
						<p class="col-sm-6">
							类型: <em>${movie.mtype}</em>
						</p>
						<p class="col-sm-6">
							国家/地区: <em>未录入</em>
						</p>
						<p class="col-sm-6">
							上映日期: <em>${movie.mdate}</em>
						</p>
						<p class="col-sm-6">
							片长: <em>100分钟</em>
						</p>
						<p class="col-sm-6">
							又名: <em>未录入</em>
						</p>
						<p class="col-sm-6">
							IMDb: <em>未录入</em>
						</p>
						
						<div class="row col-sm-12">
						<h2>影片简介</h2>
						<p>${movie.msummary}</p>
						
						
							
							</div>
					</div>
					<!-- /.blog-post -->




				</div>
				<!--/row-->

				<nav>
					<ul class="pager">
						<li><a href="#">上一部</a></li>
						<li><a href="#">下一部</a></li>
					</ul>
				</nav>

			</div>
			<!--/.col-xs-12.col-sm-9-->

			<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
				<div class="list-group" id="top10div">
					<a href='#' class='list-group-item active'>电影评分排行榜</a>
				</div>
			</div>
			<!--/.sidebar-offcanvas-->
		</div>
		<!--/row-->

		<hr>

		<footer>
			<p>&copy; 2023 Company, Inc.</p>
		</footer>

	</div>
	<!--/.container-->


	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"
		integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
		crossorigin="anonymous"></script>
	<script>
		window.jQuery
				|| document
						.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
	</script>
	<script
		src="${pageContext.request.contextPath}/dist/js/bootstrap.min.js"></script>
	<script src="${pageContext.request.contextPath}/front/offcanvas.js"></script>

	<script>
		$(document)
				.ready(
						function() {
							// $.get("url",function(res){})
							$
									.get(
											"${pageContext.request.contextPath}/MovieServlet?op=top10",
											function(res) {
												//将res字符串(json) =>转换为JavaScript对象
												var obj = JSON.parse(res)
												console.log(obj.code)
												if (obj.code == 200) {
													console.log(obj.list)
													//遍历list集合
													$
															.each(
																	obj.list,
																	function(
																			index,
																			movie) {
																		//找到div
																		$(
																				"#top10div")
																				.append(
																						"<a href='MovieServlet?op=getById&mid="+movie.mid+"' class='list-group-item'>"
																								+ (index + 1)
																								+ "&nbsp;&nbsp;"
																								+ movie.mname
																								+ "&nbsp;&nbsp;"
																								+ movie.mscore
																								+ "</a>")

																	})

												}
											})

						});
	</script>
</body>
</html>
